<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <!-- can i figure out strict? -->
<html> 
<head> 
	<title>WebTag for iPhone</title> 
	 
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

	<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
	<!--<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>-->
	<script type="text/javascript" src="../js/jquery.cookies.2.2.0.js"></script>
	<script type="text/javascript" src="js/jqtouch.js"></script>

	<script type="text/javascript" src="../js/jQueryUtil.js"></script>
	<script type="text/javascript" src="../js/Flickr.js"></script>

	<script type="text/javascript" src="js/iPhone.js"></script>

	<link rel="stylesheet" type="text/css" href="../css/general.css" />
	<link rel="stylesheet" type="text/css" href="css/iAnimations.css" />
	<link rel="stylesheet" type="text/css" href="css/iLandscape.css" />
</head>
<body> 

<div id="jqt">

<div id="checkAuth">
	<p>Checking authorization...</p>
</div>

<div id="noAuth">
	<p>Not authorized</p>
	<p><a href="/WebTag/auth.php" rel="external">Click to authorize</a></p>
</div>

<div id="validAuth">
	<p>Authorized</p>
	<p>Welcome, <span class="userNameSpan">[userName]</span>.</p>
	<p id="loadingSetsP">Loading sets...</p>
	<div id="setSelectDiv">
		<select style="font-size: 30px; max-width: 300px">
			<option>To-be-replaced</option>
		</select>
		<button>Go</button>
	</div>
	<p id="loadingPhotosP">Loading photos...</p>
</div>

<div id="main" class="class">

	<div id="firstColumn">
		<div id="navDiv">
			<div id="pictureDiv">
				<img id="picture" class="touch" src="img/bgtest.png" />
			</div>

			<div id="prevDiv">&#171;</div>
			<div id="nextDiv">&#187;</div>
			<div id="setDiv">New Year's Day brunch 2010</div>
			<div id="posDiv">10 of 1,342</div>
		</div>

		<div id="infoDiv">
			<h2 id="title" class="ellipsis">title goes here.  where does this text flow?</h2>
			<p id="desc">description goes here.  how does it flow and what size?</p>
		</div>
	</div>

	<div id="secondColumn">
		<div> <!-- do we need this div? -->
			<ul class="pads fullsize">
				<li></li> <li></li> <li></li>
				<li></li> <li></li> <li></li>
				<li></li> <li></li> <li></li>
			</ul>
		</div>

		<div id="tagsDiv">
			<ul id="tags">
				<li>Andy</li> <li>Brianne</li> <li>cep</li> <li>DC</li> <li>ehs</li> <li>Gina</li> <li>Jeremy</li>
				<li>Justin</li> <li>Kimberly</li> <li>Kyle</li> <li>Lauren</li> <li>Tyler</li> <li>Andy</li>
				<li>Brianne</li> <li>cep</li> <li>DC</li> <li>ehs</li> <li>Gina</li> <li>Jeremy</li> <li>Justin</li>
				<li>Kimberly</li> <li>Kyle</li> <li>Lauren</li> <li>Tyler</li>
			</ul>
		</div>
	</div>

</div> <!-- #main -->

<div id="padRenamePage" class="landscapePage keyboardPage ">
	<ul class="pads">
		<li></li> <li></li> <li></li>
		<li></li> <li></li> <li></li>
		<li></li> <li></li> <li></li>
	</ul>
	<div>
		<div class="input">
			<p><input id="newTag"></p> <!-- input is first so Safari can't center it -->
			<p class="ellipsis">Prev: <span>[previous tag]</span></p>
		</div>
		<ul class="buttons">
			<li id="prNext">Next</li>
			<li id="prDone">Done</li>
		</ul>
	</div>
</div> <!-- #padRenamePage -->

<div id="padSelectPage" class="landscapePage">
	<div id="psInstructions">
		<p>Select Pad to Edit</p> <!-- need to create a good h2 (or similar) css rule for this -->
		<ul>
			<li id="psClear">Clear All</li>
			<li id="psDone">Done</li>
		</ul>
	</div>
	<div> <!-- do we need this div? -->
		<ul class="pads fullsize">
			<li></li> <li></li> <li></li>
			<li></li> <li></li> <li></li>
			<li></li> <li></li> <li></li>
		</ul>
	</div>
</div> <!-- #padSelectPage -->

</div> <!-- #jqt -->

	</body> 
</html> 
	
